<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="eName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户性别</label>
                            <div class="layui-input-inline" style="width: 250px">
                                男<input type="radio" name="eSex" value="男" >
                                女<input type="radio"  name="eSex" value="女">
                                全部<input type="radio"  name="eSex" value="" checked="true">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户部门</label>
                            <div class="layui-input-inline">
                                <select name="eDepartment" class="layui-input">
                                    <option value="-1">全部角色</option>
                                    <c:forEach items="${departmentList}" var="mentList">
                                        <option value="${mentList.departmentId}">${mentList.departmentName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="userFormSubmit"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <shiro:hasAnyRoles name="系统管理员,经理">
                <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
                    <i class="layui-icon layui-icon-add-1"></i>
                    新增
                </button>
            </shiro:hasAnyRoles>
                <%--<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
                    <i class="layui-icon layui-icon-delete"></i>
                    删除
                </button>--%>
        </script>

                <table class="layui-hide" id="currentTableId" lay-filter="userTableFilter"></table>

        <script type="text/html" id="userOperate">
            <shiro:hasAnyRoles name="系统管理员">
                <a class="layui-btn layui-btn-warm " lay-event="addRole"> <i class="layui-icon layui-icon-username">添加角色</i></a>
                <a class="layui-btn  layui-btn-normal layui-btn-sm "  lay-event="uptate"><i class="layui-icon layui-icon-edit">修改</i></a>
                <a class="layui-btn layui-btn-sm layui-btn-danger   data-count-delete" lay-event="delete"><i class="layui-icon layui-icon-delete">删除</i></a>
            </shiro:hasAnyRoles>
        </script>

    </div>

</div>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>

<script>
        //引入table
        layui.use(['table','form'],function (){
            var $ = layui.jquery;
            var from = layui.form;
            var table = layui.table;
            var form = layui.form;
            //执行表格的数据填充操作
            table.render({
                //指定渲染的表格
                elem:'#currentTableId',
                //指定获取数据的路径
                url:'user/selectLikeUser',
                toolbar:'#toolbarDemo',
                //规定请求方式
                method:'post',
                //开启分页
                page:true,
                check:true,
                //指定每页显示数
                limits:[1,10,15],
                even:true,
                cols:[[
                    {field:'eId',title:'用户编号',  align: 'center'},
                    {field:'eName',title:'用户名称',  align: 'center'},
                    {field:'eSex',title:'性别',  align: 'center'},
                    {field:'eEmail',title:'邮箱',  align: 'center'},
                    {field:'eAddress',title:'地址',  align: 'center'},
                    {field:'ePhone',title:'手机号码',  align: 'center'},
                    {field:'eBorn',title:'生日',  align: 'center'},
                    {field:'eDepartment',title:'部门',templet:'#department',  align: 'center'},
                    {field:'eEntry',title:'入职时间',  align: 'center'},
                    {field:'eDimission',title:'离职时间', align: 'center'},
               /*     {field:'ePhoto',title:'员工头像'},*/
                    {field:'eTime',title:'最后登录时间', align: 'center'},
                    {field:'eState',title:'状态',  align: 'center',
                        templet: function (d) {
                            var state = "";
                            if (d.eState == "正常") {
                                if (d.eId === 1) {
                                    state = "<input type='checkbox' disabled ='disabled'  value='" + d.eId + "' id='status' lay-filter='eStatus' checked='checked' name='status'  lay-skin='switch' lay-text='正常|禁用' value='正常'>";
                                }else{
                                    state = "<input type='checkbox'   value='" + d.eId + "' id='status' lay-filter='eStatus' checked='checked' name='status'  lay-skin='switch' lay-text='正常|禁用' value='正常' >";

                                }
                            }

                            else {
                                state = "<input type='checkbox' value='" + d.eId + "' id='status' lay-filter='eStatus'  name='status'  lay-skin='switch' lay-text='正常|禁用' >";                            }

                            return state;
                        }

                    },
                    {title: '操作',toolbar:'#userOperate',minWidth:300, align: 'center'},
               /*     {field:'',title:''}*/
                ]],
            })


                //添加删除按钮事件
                table.on('toolbar(userTableFilter)',function (obj){
                    if (obj.event==='add') {
                        //执行添加
                        //执行添加操作
                        layer.open({
                            //执行修改用户操作
                            title: '添加用户信息',
                            type: 2,
                            shade: 0.1,
                            area: ['32%', '70%'],
                            content: '/user/skipAddUser'
                        })
                    }
                });
                //表格事件
                table.on('tool(userTableFilter)',function (obj){
                    //判断表格的的操作类型
                    if (obj.event==='addRole'){
                        //授权操作
                        if (obj.data.eId===1){
                            //老板有所有权限无需改变
                            //提示
                          layer.msg('无法对老板进行角色操作',{icon:2},function (index){
                                layer.close(index);
                            })
                            return false;
                        }else {
                            //执行添加角色操作
                            layer.open({
                                title: '添加角色',
                                type: 2,
                                shade: 0.1,
                                area: ['32%', '52%'],
                                content: '/user/skipAddRole?eId=' + obj.data.eId
                            })
                        }
                    }else if(obj.event==='uptate'){
                        //修改用户信息
                        layer.open({
                            //执行修改用户操作
                            title:'修改用户信息',
                            type:2,
                            shade: 0.1,
                            area:['32%','70%'],
                            content: '/user/skipUpdateUser?eId='+obj.data.eId
                        })
                    }else if(obj.event==='delete'){
                        if (obj.data.eId===1){
                            //老板有所有权限无需改变
                            //提示
                            layer.msg('无法对老板进行删除',{icon:2},function (index){
                                layer.close(index);
                            })
                            return false;
                        }
                        //执行删除
                        layer.confirm('真的要删除吗？',function(index){

                            $.post('/user/deleteUser',{"eId":obj.data.eId},function(result){
                                if (result.success) {

                                    layer.msg(result.msg, {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        //执行重载
                                        table.reload('currentTableId');
                                        layer.close(index);
                                    });
                                }else{
                                    layer.msg(result.msg,{icon:2},function (index){
                                        layer.close(index);
                                    })
                                }
                            });

                        })

                    }

                })

                //from表单提交事件
                form.on('submit(userFormSubmit)',function (data){
                    //执行搜索重载
                    table.reload('currentTableId',{
                        //规定默认第几页
                        page:{
                            curr:1
                        },
                        where:{
                            //添加请求参数
                           eName:data.field.eName,
                           eSex:data.field.eSex,
                            eDepartment:data.field.eDepartment
                        }
                    });
                    return false;
                })


            //开关事件
            form.on('switch(eStatus)',function (data){

                //获取用户编号
                var eId = data.value;
                //获取是否打开
                var checked = data.elem.checked;//判断开关状态

                var checked1 = null;
                var eState = null;
                if (checked===true){
                    data.elem.checked =false;
                    checked1 = true;
                    eState ="正常";
                }else{
                    data.elem.checked =true;
                    checked1 = false;
                    eState="禁用";
                }
                form.render();
                //提示
                layer.confirm('确定要变为'+eState+"状态吗?",{icon:3},function (index){
                    //发送异步请求将状态更改
                    $.post('/user/updateOneUser',{eId:eId,eState:eState},function(result){
                        if (result.success){
                            if (result.msg==='自己'){
                                layer.msg('您无法对自身进行状态修改操作',{icon:2},function (){
                                    layer.close(index);
                                })
                            }else{
                                layer.msg(result.msg,{icon:1,time:1},function (){
                                    data.elem.checked =checked1;
                                    form.render();
                                    layer.close(index);
                                })
                            }
                        }
                    })

                })
            })

        })
</script>
<script type="text/html" id="department">
    {{d.eDepartment.departmentName}}
</script>
</body>
</html>